// usestate
// 定义: 该钩子函数使函数组件有了状态
// 导入 react 导入
// 语法: const [变量名,修改方法函数] = useState(变量的初始值)
// 注意: 一般将修改方法函数起名叫set变量名; 并且该变量 只能通过 修改方法函数 修改其值,useState 可以使用多次
// 注意: 修改方法函数 修改变量的值有两种方式
//  方式1: 直接传值 setCount(count + 1)
//  方式2: 通过箭头函数的形式


import React, { useState } from 'react';

const Myusestate = () => {
    // 在函数组件内使用hook
    const [count, setCount] = useState(0);
    //console.log(useState(0)) // 返回的数组形式 [0, ƒ]
    const addCount = () => {
        // count++  count= count+1
        // 方式1:
        // setCount(count + 1)
        // 方式2:
        setCount(() => count + 1)

    }


    const [userinfo, setUserinfo] = useState({
        name: '吕明亮',
        age: 18
    })

    const editUserInfoFn = () => {
        // 注意: 直接赋值一个对象, react 会认为赋值为就的值,并不是一个新值
        console.log('点击事件');
        // userinfo.age++;
        // setUserinfo({ ...userinfo }) // 这种写法保证赋值的是一个新对象
        setUserinfo({ ...userinfo, age: userinfo.age + 1 })

    }


    const [usernameArr, setusernameArr] = useState(['刘蒙蒙', '张越超']);
    const addUser = () => {
        // usernameArr.push('高鹏')
        // setusernameArr([...usernameArr])
        setusernameArr([...usernameArr, '高鹏'])
    }
    return (
        <div>
            {/* 定义普通数据类行 */}
            {/* <p onClick={() => addCount()}>count:{count}</p> */}
            <p onClick={addCount}> count: {count}</p>
            {/* <p onClick={() => setCount(count + 1)}>count:{count}</p> */}

            {/* 操作复杂数据类型--对象类型 */}
            <p onClick={() => editUserInfoFn()}>{userinfo.name}---{userinfo.age}</p>

            {/* 操作复杂数据类型--数组类型 */}

            <ul>
                {usernameArr.map((item, index) => <li key={index}>{item}</li>)}
            </ul>
            <p><button onClick={() => addUser()}>加人</button></p>
        </div>
    );
}

export default Myusestate;
